元件中資料與事件的傳遞

在元件上使用v-model指令

• 我們通常將v-model稱為Vue中的雙向綁定指令，即對可互動使用者輸入的相關元素來說，使用這個指令可以將資料的變化同步到元素上。
• 同樣，當元素輸入的資訊變化時，也會同步到對應的資料屬性上。在撰寫自定義元件時，難免會使用到可進行使用者輸入的相關元素，如何對其輸入的內容進行雙向綁定呢？
• 首先，我們來複習一下 v-model 指令的使用，範例程式如下：

<div id="Application">
  <div>
    <input v-model="inputText" />
    <div>{{inputText}}</div>
    <button @click="this.inputText = ''">清空</button>
  </div>
</div>

<script>
    const App = Vue.createApp({
        data(){
            return {
                inputText:"" // 雙向綁定到輸入框的屬性
            }
        }
    })
    App.mount("#Application")
</script>

• 執行程式，之後在頁面的輸入框中輸入文案，可以看到對應的div標籤中的文案也會改變，同理，當我們點擊「清空」按鈕後，輸入框和對應的div標籤中的內容也會被清空，這就是v-model雙向綁定指令提供的基礎功能。